<template>
	<view class="page">
		<!-- 顶部用户块 -->
		<view class="user">
			<!-- 用户信息 -->
			<view class="userInfo">
				<view class="user_service">
					<image style="width: 30rpx;height: 30rpx;margin-left: 56rpx;margin-top: 20rpx;"
						src="../../static/user.png" mode="scaleToFill" @click="jumpToPage(1)"></image>
				</view>
				<view class="userInfo_head">
					<image v-if="userInfo.avatarUrl" class="avatar" :src="userInfo.avatarUrl"></image>
					<image v-else class="avatar" src="cloud://inspace-v1.696e-inspace-v1-1302892928/institutionImage/logo.png" mode=""></image>
				</view>
				<view class="nickName">{{userInfo.nickName}}</view>
				<view class="nickName">{{userInfo.institution}}</view>
			</view>
		</view>

		<!-- 底部菜单块 -->
		<view class="menu">
			<view class="none">
				<button class="none-button" @click="jumpToPage(2)" v-show = "type =='机构'">
					<image src="../../static/myAbout.png" mode=""></image>机构信息<text class="none-button-text">></text>
				</button>
				<button class="none-button" @click="jumpToPage(3)">
					<image src="../../static/myInformation.png"></image> 我的信息<text class="none-button-text">></text>
				</button>
				<button class="none-button" @click="jumpToPage(4)" v-show = "type != '机构'">
					<image src="../../static/myOrder.png" mode=""></image> 我的订单<text class="none-button-text">></text>
				</button>
				<button class="none-button" @click="jumpToPage(5)" v-show = "type != '机构'">
					<image src="../../static/myWallet.png" mode=""></image> 我的钱包<text class="none-button-text">></text>
				</button>
				<button class="none-button" @click="jumpToPage(6)" v-show = "type != '机构'">
					<image src="../../static/myRefer.png" mode=""></image> 我的推荐人<text class="none-button-text">></text>
				</button>
				<button class="none-button" @click="jumpToPage(8)" v-show = "type == '机构'">
					<image src="../../static/myAbout.png" mode=""></image>数据报表<text class="none-button-text">></text>
				</button>
				<button class="none-button" @click="jumpToPage(7)">
					<image src="../../static/myAbout.png" mode=""></image> 关于<text class="none-button-text">></text>
				</button>
				<!-- <button class="none-button">关于<text class="none-button-text">></text></button> -->
			</view>
		</view>
	</view>

</template>

<script>
	import cloudbase from '@cloudbase/js-sdk'
	
	export default {
		data() {
			return {
				type: getApp().globalData.userInfo.type,
				userInfo: {
					avatarUrl: 'https://696e-inspace-v1-1302892928.tcb.qcloud.la/institutionImage/logo2.png',
					nickName: '体验用户',
					institution: '东莞因楽文化分校'
				}
			}
		},
		onLoad() {
			if (getApp().globalData.userInfo.type == '机构') {
				this.changeTabBar();
				this.getUserInfo();
			} else {
				this.getUserInfo();
			}
		},
		onShow() {
			if (getApp().globalData.userInfo.type == '机构') {
				this.changeTabBar();
				this.getUserInfo();
			} else {
				this.getUserInfo();
			}
		},
		created() {},
		methods: {
			changeTabBar: function() {
				uni.setTabBarItem({
					index: 0,
					text: '运营'
				}).then(res => {
					// console.log(res);
					uni.setTabBarItem({
						index: 1,
						text: '管理',
					}).then(res => {
						uni.setTabBarItem({
							index: 2,
							text: '教研',
						})
					})

				})
			},
			getUserInfo: function() {
				// console.log(getApp().globalData.userInfo);
				if (getApp().globalData.userInfo.openId) {
					this.userInfo.avatarUrl = getApp().globalData.userInfo.avatarUrl;
					this.userInfo.nickName = getApp().globalData.userInfo.nickName;
					// this.userInfo.institution = getApp().globalData.userInfo.institution;
					this.type = getApp().globalData.userInfo.type;
					// 获取所在机构的信息
					cloudbase.database().collection('institution').where({
						_id: getApp().globalData.userInfo.institutionId
					}).get().then(res => {
						console.log(res);
						let list = res.data;
						if (list.length != 0) {
							this.userInfo.institution = list[0].institution
						}
					})
				}
			},
			jumpToPage: function(index) {
				// console.log(index);
				if (getApp().globalData.userInfo.openId != '') {

					switch (index) {
						case 1:
							// 跳转至反馈
							uni.navigateTo({
								url: "../feedback/feedback"
							})
							break;
						case 2:
							// 跳转至机构信息
							uni.navigateTo({
								url: "../insInformation/insInformation"
							})
							break;
						case 3:
							// 跳转至我的信息
							uni.navigateTo({
								url: '../myInformation/myInformation'
							});
							break;
						case 4:
							// 跳转至我的订单
							uni.navigateTo({
								url: '../myOrderList/myOrderList'
							})
							break;
						case 5:
							// 跳转至我的钱包
							uni.navigateTo({
								url: '../myWallet/myWallet'
							})
							break;
						case 6:
							// 跳转至我的推荐人
							uni.navigateTo({
								url: '../myReference/myReference'
							})
							break;
						case 7:
							// 跳转至关于
							uni.navigateTo({
								url: '../myAbout/myAbout'
							})
							break;
						case 8:
							uni.navigateTo({
								url: '../institutionMine/institutionMine'
							})
							break;
					}
				} else {
					uni.navigateTo({
						url: '../login/login'
					})
				}
			}
		}
	}
</script>

<style>
	page{
		background-color: #F3F5F7;
	}
	.page {
		width: 750rpx;
		/* height: 1334rpx; */
		/* height: 1020rpx; */
		/* padding-bottom: 60px; */
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
	}

	.user {
		width: 702rpx;
		height: 436rpx;
		margin-left: auto;
		margin-right: auto;
		border-radius: 20px;
		background-color: #FD973F;
		box-sizing: border-box;
	}

	.userInfo {
		width: 100%;
		height: 100%;
/* 		margin-top: 14px; */
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		/* display: inline-flex; */
	}

	.user_service {
		width: 100%;
		height: 50rpx;
	}

	.userInfo_head {
		display: flex;
		flex-direction: column;
		width: 200rpx;
		height: 200rpx;
		/* margin-top: 50rpx; */
		align-items: center;
		justify-content: center;
		/* margin-left: auto; */
		/* margin-right: auto; */
		/* padding-left: 18.5rpx; */
	}

	.avatar {
		display: flex;
		flex-direction: column;
		width: 163rpx;
		height: 163rpx;
		border-radius: 50%;
		align-items: center;
		justify-content: center;
	}

	.nickName {
		width: 100%;
		font-size: 33rpx;
		font-weight: 400;
		text-align: center;
		color: #FFFFFF;
		/* margin: auto 0; */
		/* margin-left: 14px; */
	}

	.menu {
		width: 702rpx;
		/* height: 898rpx; */
		margin-left: auto;
		margin-right: auto;
		background: #f7f7f7;
		border-radius: 25px 25px 0 0;
		box-sizing: border-box;
		/* box-shadow: 0px -2px 4px #DDDDDD; */
	}

	.list-icon {
		font-size: 26px;
		line-height: 26px;
		margin: auto 0;
		margin-right: 10px;
		color: #009EED;
	}

	.none {
		width: 100%;
		/* height: 100%; */
		margin-top: 15px;
		border-radius: 25px;
		background-color: #FFFFFF;
		font-size: 28rpx;
	}

	.none-button {
		/* width: none !important; */
		height: 55px;
		padding-left: 28px;
		padding-right: 0;
		line-height: 55px;
		text-align: left;
		background: unset;
		border: none;
		color: #898A8F;
		/* background-color: #FFFFFF; */
	}

	.none-button-text {
		float: right;
		padding-right: 28px;
		color: #898A8F;
	}

	.none image {
		width: 30rpx;
		height: 30rpx;
		vertical-align: middle;
		margin-right: 14rpx;
	}

	button::after {
		border: none;
	}
</style>
